<template>
  <div class="orders">
    <div class="container">
      <!-- 订单状态标签页 -->
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="全部订单" name="all">
          <order-list :orders="filteredOrders" />
        </el-tab-pane>
        <el-tab-pane label="待付款" name="unpaid">
          <order-list :orders="filteredOrders" />
        </el-tab-pane>
        <el-tab-pane label="待发货" name="unshipped">
          <order-list :orders="filteredOrders" />
        </el-tab-pane>
        <el-tab-pane label="待收货" name="shipped">
          <order-list :orders="filteredOrders" />
        </el-tab-pane>
        <el-tab-pane label="待评价" name="received">
          <order-list :orders="filteredOrders" />
        </el-tab-pane>
      </el-tabs>

      <!-- 订单列表 -->
      <div class="order-list">
        <div v-for="order in filteredOrders" :key="order.id" class="order-item">
          <div class="order-header">
            <div class="order-info">
              <span class="order-number">订单号：{{ order.orderNumber }}</span>
              <span class="order-date">下单时间：{{ order.createTime }}</span>
            </div>
            <div class="order-status">{{ order.statusText }}</div>
          </div>
          
          <div class="order-content">
            <div v-for="product in order.products" :key="product.id" class="product-item">
              <img :src="product.image" :alt="product.name">
              <div class="product-info">
                <h4>{{ product.name }}</h4>
                <p class="specs">{{ product.specs }}</p>
              </div>
              <div class="product-price">
                <span class="price">¥{{ product.price }}</span>
                <span class="count">x{{ product.count }}</span>
              </div>
            </div>
          </div>

          <div class="order-footer">
            <div class="total-info">
              共{{ order.totalCount }}件商品 合计：
              <span class="total-price">¥{{ order.totalAmount }}</span>
            </div>
            <div class="order-actions">
              <el-button 
                v-if="order.status === 'unpaid'" 
                type="primary"
                @click="handlePay(order)"
              >
                立即付款
              </el-button>
              <el-button 
                v-if="order.status === 'shipped'" 
                type="success"
                @click="handleConfirmReceive(order)"
              >
                确认收货
              </el-button>
              <el-button 
                v-if="order.status === 'received'" 
                @click="handleReview(order)"
              >
                评价
              </el-button>
              <el-button @click="handleOrderDetail(order)">订单详情</el-button>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <el-empty 
          v-if="filteredOrders.length === 0"
          description="暂无相关订单"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { onMounted, onUnmounted } from 'vue'
import { debounce } from 'lodash'

const router = useRouter()
const activeTab = ref('all')

// 模拟订单数据
const orders = ref([
  {
    id: 1,
    orderNumber: 'DD20240101001',
    createTime: '2024-01-01 12:00:00',
    status: 'unpaid',
    statusText: '待付款',
    totalCount: 2,
    totalAmount: 299,
    products: [
      {
        id: 1,
        name: '商品名称1',
        specs: '规格：默认',
        price: 199,
        count: 1,
        image: '/images/product1.jpg'
      },
      {
        id: 2,
        name: '商品名称2',
        specs: '规格：默认',
        price: 100,
        count: 1,
        image: '/images/product2.jpg'
      }
    ]
  }
])

// 根据标签页筛选订单
const filteredOrders = computed(() => {
  if (activeTab.value === 'all') {
    return orders.value
  }
  return orders.value.filter(order => order.status === activeTab.value)
})

// 标签页切换
const handleTabClick = (tab) => {
  console.log('切换到标签：', tab.props.name)
}

// 支付订单
const handlePay = (order) => {
  console.log('支付订单：', order.orderNumber)
  // TODO: 实现支付逻辑
}

// 确认收货
const handleConfirmReceive = (order) => {
  console.log('确认收货：', order.orderNumber)
  // TODO: 实现确认收货逻辑
}

// 评价订单
const handleReview = (order) => {
  console.log('评价订单：', order.orderNumber)
  // TODO: 实现评价逻辑
}

// 查看订单详情
const handleOrderDetail = (order) => {
  router.push(`/order/${order.id}`)
}

// 使用防抖处理数据更新
const updateData = debounce(() => {
  // 数据更新逻辑
}, 200)

onMounted(() => {
  updateData()
})

onUnmounted(() => {
  updateData.cancel()
})
</script>

<style scoped>
.orders {
  padding: 20px 0;
  background-color: var(--bg-color-page);
  min-height: calc(100vh - 200px);
}

.container {
  width: 1200px;
  margin: 0 auto;
}

/* 订单项样式 */
.order-item {
  background: var(--bg-color);
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.order-info {
  font-size: 14px;
  color: var(--text-regular);
}

.order-number {
  margin-right: 20px;
}

.order-status {
  color: var(--primary-color);
  font-weight: bold;
}

/* 商品列表样式 */
.order-content {
  padding: 20px 0;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.product-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.product-info {
  flex: 1;
  margin: 0 20px;
}

.product-info h4 {
  margin: 0 0 5px;
  font-size: 14px;
}

.specs {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.product-price {
  text-align: right;
}

.price {
  color: var(--danger-color);
  font-size: 16px;
  margin-right: 10px;
}

.count {
  color: var(--text-secondary);
}

/* 订单底部样式 */
.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid var(--border-color);
}

.total-info {
  color: var(--text-regular);
}

.total-price {
  color: var(--danger-color);
  font-size: 18px;
  font-weight: bold;
}

.order-actions {
  display: flex;
  gap: 10px;
}

/* 标签页样式 */
:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

:deep(.el-tabs__item) {
  font-size: 16px;
}

:deep(.el-tabs__item.is-active) {
  color: var(--primary-color);
}
</style>
